<template>
    <div>
      <el-button type="warning" @click="openDialog">新增</el-button>
      <el-button type="warning" @click="logout">退出登录</el-button>
      <el-row>
        <el-col :span="4" v-for="(o, index) in shopList" :key="index" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="o.pic" class="image">
            <div style="padding: 14px;">
              <span>{{o.shopName}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ o.deployTime }}</time>
                <el-button type="text" class="button" @click="update(o)">修改</el-button>
                <el-button type="text" class="button" @click="del(o.id)">删除</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="shop" label-width="80px">
          <el-upload
            class="avatar-uploader"
            action="http://121.36.161.39:8889/springboot/shop/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-form-item label="商品名称">
            <el-input v-model="shop.shopName"></el-input>
          </el-form-item>
          <el-form-item label="上架时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="shop.deployTime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="shop.price"></el-input>
          </el-form-item>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="shop.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="insert">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>


        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

    </div>
</template>

<script>
  import axios from 'axios'
    export default {
      data() {
        return {
          shopList:[],
          dialogVisible: false,
          shop:{},
          imageUrl:''
        };
      },
      methods:{
        findAll:function () {
          axios.get("http://121.36.161.39:8889/springboot/shop/findAll").then(res=>{
            if (res.data.code==200){
              console.log(res.data.data)
              this.shopList=res.data.data;
            }
          })
        },
        openDialog:function () {
          this.dialogVisible=true;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.shop.pic=res;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        insert:function () {
          axios.post("http://121.36.161.39:8889/springboot/shop/insert",this.shop).then(res=>{
            if (res.data.code==200){
              this.dialogVisible=false;
              this.findAll()
            }else{
              alert(res.data.message)
            }
          })
        },
        logout:function () {
          axios.get("http://121.36.161.39:8889/springboot/user/logout").then(res=>{
            if (res.data.code==200){
              this.$router.push("/")
            }
          })
        },
        update:function (obj) {
          this.shop=obj;
          this.dialogVisible=true;

        },
        del:function (id) {
          axios.post("http://121.36.161.39:8889/springboot/shop/del",{id:id}).then(res=>{
            if (res.data.code==200){
              this.findAll();
            } else{
              alert(res.data.message);
            }
          })
        }
      },
      mounted(){
      this.findAll();
      }
    }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
